<template>
	<view>
		<z-paging
			ref="paging"
			:refresher-enabled="false"
			v-model="dataList"
			@query="queryList"
			safeAreaInsetBottom
		>
			<view slot="top" class="top">
				<u-navbar title="订单列表" :autoBack="true" :fixed="false" />
				<u-tabs
					:list="tabList"
					lineColor="linear-gradient(90deg, rgba(255, 203, 46, 1) 0%, rgba(255, 157, 46, 1) 100%)"
					:activeStyle="activeStyle"
					@click="tabChange"
					:scrollable="true"
					:current="current"
				></u-tabs>
			</view>
			<view class="item" v-for="(item, index) in dataList" :key="index">
				<view class="item_title">
					<view class="flex">
						<image src="/static/image//home_6.png"></image>
						<u--text
							:text="'订单编号:' + item.order_no"
							lines="1"
							color="#000"
							bold
							size="14"
						></u--text>
					</view>
					<view class="item_status">{{ getState(item.reserve_state, item.state) }}</view>
				</view>
				<view class="item_content" @click="goDetails(item)">
					<view class="content_left"><image src="/static/image/merchant_8.png"></image></view>
					<view>
						<view class="title_right">
							<image src="/static/image/merchant_14.png"></image>
							<u--text
								:text="'预定人信息：' + item.reserve_people + ' ' + item.reserve_mobile"
								lines="1"
								color="#6e6e6e"
								size="14px"
							/>
						</view>
						<view class="title_right m-top-10">
							<image src="/static/image/merchant_20.png"></image>
							<u--text
								v-if="item.is_box == '1'"
								:text="'预定桌号：' + item.num + '号'"
								lines="1"
								color="#6e6e6e"
								size="14px"
							/>
							<u--text
								v-if="item.is_box == '0'"
								:text="'预定包厢：' + item.room_name"
								lines="1"
								color="#6e6e6e"
								size="14px"
							/>
						</view>
						<view class="title_right m-top-10">
							<image src="/static/image/merchant_21.png"></image>
							<u--text
								:text="'预定人数：' + item.people_num"
								lines="1"
								color="#6e6e6e"
								size="14px"
							/>
						</view>
						<view class="title_right m-top-10">
							<image src="/static/image/merchant_22.png"></image>
							<u--text
								:text="'预定时间：' + getTime(item.reserve_time)"
								lines="1"
								color="#6e6e6e"
								size="14px"
							/>
						</view>
					</view>
				</view>
				<view class="item_btn">
					<u-button
						text="取消预定"
						shape="circle"
						v-if="item.state == '1' && item.state != 4"
						@click="cancel(item)"
						:customStyle="btn1Style"
					></u-button>
					<u-button
						text="确认到店"
						shape="circle"
						v-if="item.state == '1' && item.state != 4"
						@click="goReach(item)"
						:customStyle="btnStyle"
					></u-button>
					<u-button
						text="去点餐"
						shape="circle"
						v-if="item.state == '2' && item.reserve_state == '2' && item.state != 4"
						@click="goOrder(item)"
						:customStyle="btnStyle"
					></u-button>
					<u-button
						text="去结算"
						shape="circle"
						v-if="item.state == '2' && item.reserve_state == '3' && item.state != 4"
						@click="goDetail(item)"
						:customStyle="btnStyle"
					></u-button>
					<u-button
						text="查看详情"
						shape="circle"
						v-if="item.state == '4' || item.state == '3'"
						@click="goDetail(item)"
						:customStyle="btnStyle"
					></u-button>
				</view>
			</view>
		</z-paging>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			activeStyle: {
				color: '#ff9d2e'
			},
			dataList: [],
			tabList: [
				{
					name: '待到店',
					status: 1,
					type: 'reserve_state'
				},
				{
					name: '待点餐',
					status: 2,
					type: 'reserve_state'
				},
				{
					name: '待结算',
					status: 3,
					type: 'reserve_state'
				},
				{
					name: '已完成',
					status: 6,
					type: 'reserve_state'
				},
				{
					name: '已取消',
					status: 4,
					type: 'state'
				}
			],
			current: 0,
			btnStyle: {
				background: 'linear-gradient(90deg, rgba(255, 203, 46, 1) 0%, rgba(255, 157, 46, 1) 100%)',
				width: '120px',
				height: '36px',
				margin: '0px 0px 0px 20px',
				color: '#fff',
				border: 'none'
			},
			btn1Style: {
				background:
					'linear-gradient(90deg, rgba(255, 108, 3, 1) 0%, rgba(255, 109, 5, 1) 5.5%, rgba(255, 132, 31, 1) 100%)',
				width: '120px',
				height: '36px',
				margin: '0px 0px 0px 20px',
				color: '#fff',
				border: 'none'
			}
		};
	},
	onLoad(event) {
		uni.$on('uploadList', () => {
			this.$refs.paging.reload();
		});
		event.current ? (this.current = event.current) : (this.current = 0);
	},
	computed: {
		...mapGetters(['merchant'])
	},
	methods: {
		goDetails(item) {
			console.log(item.reserve_state);
			console.log(item.state);
			if (item.reserve_state == '1' && item.state === 1) {
				uni.$u.route({
					url: 'pagesA/my/orderDetail',
					params: {
						ids: item.id
					}
				});
			}
			if (item.reserve_state == '2' && item.state === 2) {
				uni.$u.route({
					url: 'pagesA/my/orderDetail',
					params: {
						ids: item.id
					}
				});
			}
			if (item.reserve_state == '6' && item.state === 2) {
				uni.$u.route({
					url: 'pagesA/my/orderDetail',
					params: {
						id: item.order_id
					}
				});
			}
		},
		//取消订单
		cancel(item) {
			let that = this;
			const date = new Date().getTime();
			uni.showModal({
				content: '确认要取消吗',
				success(res) {
					if (res.confirm) {
						//判断当前时间是否大于用户预定的时间 如果大于可以取消 小于 不行
						if (date > item.reserve_time * 1000) {
							that.$http
								.post('wanlshop/reserve/cancelReserveShop', {
									id: item.id
								})
								.then(res => {
									uni.hideLoading();
									if (res.code == 1) {
										that.$refs.paging.reload();
										setTimeout(() => {
											that.$refs.uToast.show({
												type: 'default',
												duration: 1000,
												message: '取消成功'
											});
										}, 150);
									}
								});
						} else {
							return uni.showToast({
								title: '当前订单不可取消',
								icon: 'none'
							});
						}
					} else {
						return false;
					}
				}
			});

			//   if(date>item.reserve_time*1000){

			// }
		},
		//去点餐
		goOrder(item) {
			uni.$u.route({
				url: 'pagesA/my/orderDishes',
				params: {
					shop_id: this.merchant.id,
					reserve_id: item.id,
					id: item.num
				}
			});
		},
		//确认到店
		goReach(item) {
			uni.showLoading({
				title: '加载中...',
				mask: true
			});
			this.$http
				.post('wanlshop/reserve/toStore', {
					id: item.id
				})
				.then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.$refs.paging.reload();
						setTimeout(() => {
							this.$refs.uToast.show({
								type: 'default',
								message: '操作成功',
								duration: 1000
							});
						}, 150);
					}
				});
		},
		// 去结算
		goDetail(item) {
			if (item.state == '2' && item.reserve_state == '3' && item.state != 4) {
				uni.$u.route({
					url: 'pagesA/my/orderDetail?type=shangjia',
					params: {
						id: item.order_id
					}
				});
			} else if (item.state == 4 || item.state == 3) {
				uni.$u.route({
					url: 'pagesA/my/orderDetail',
					params: {
						ids: item.id
					}
				});
			}
		},
		queryList(pageNo, pageSize) {
			this.$http
				.post('wanlshop/reserve/reserveShopList', {
					page: pageNo,
					limit: pageSize,
					state: this.tabList[this.current].status,
					type: this.tabList[this.current].type
				})
				.then(res => {
					res.code == 1
						? this.$refs.paging.complete(res.data.data)
						: this.$refs.paging.complete(false);
				});
		},
		tabChange(event) {
			if (this.current == event.index) return;
			this.current = event.index;
			this.$refs.paging.reload();
		},
		getState(status, state) {
			if (status === '1' && state === 1) {
				return '待到店';
			} else if (status === '2' && state === 2) {
				return '待点餐';
			} else if (status === '3' && state === 2) {
				return '待结算';
			} else if (status === '6' && state === 2) {
				return '已完成';
			} else if (status === '1' && (state === 4 || state === 3)) {
				return '已取消';
			}
		},
		getTime(date) {
			var date = new Date(date * 1000); //如果date为10位需要乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
			var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
			var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
			var s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			return Y + M + D + h + m + s;
		}
	}
};
</script>
<style lang="scss" scoped>
page {
	background: #f8f9fd;
}
</style>
<style lang="scss" scoped>
.flex {
	display: flex;
	align-items: center;
}

.top {
	background: #fff;
	padding-bottom: 10rpx;
}

.item {
	background: #fff;
	margin-top: 20rpx;
	padding: 24rpx;

	.item_title {
		display: grid;
		grid-template-columns: auto 100rpx;
		grid-column-gap: 20rpx;
		padding-bottom: 24rpx;
		border-bottom: 2rpx solid #f0f0f0;

		image {
			width: 52rpx;
			height: 52rpx;
			margin-right: 10rpx;
		}
	}

	.item_status {
		border-radius: 16rpx 0rpx 16rpx 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 24rpx;
		background: linear-gradient(90deg, rgba(255, 203, 46, 1) 0%, rgba(255, 157, 46, 1) 100%);
	}

	.item_content {
		display: grid;
		grid-template-columns: 220rpx auto;
		grid-column-gap: 20rpx;
		align-items: center;
		padding: 28rpx 0rpx;

		.content_left {
			width: 100%;
			height: 220rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 10rpx;
			background: #f8f9fd;

			image {
				width: 160rpx;
				height: 104rpx;
			}
		}

		.title_right {
			display: grid;
			grid-template-columns: 40rpx auto;
			grid-column-gap: 20rpx;
			align-items: center;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.item_btn {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}
</style>
